<template>
  <div class="content-wapper">
    <div class="update-time">
      百度数据实时监控<span>更新时间：{{ latestModifyTime || moment(new Date()).format('YYYY-MM-DD hh:mm:ss') }}</span>
    </div>
    <a-tabs default-active-key="2" @change="callback">
      <!-- 站点维度 -->
      <a-tab-pane key="1" tab="站点维度">
        <!-- 站点数据 -->
        <a-spin class="statist-box" tip="加载中..." :spinning="isLoading">
          <div class="statist-wapper">
            <!--表格  -->
            <div class="left-box host-box-item">
              <!-- 筛选 -->
              <div class="filter" ref="filterBox">
                <div class="l search-box">
                  <div>
                    <span class="text">站点：</span>
                    <a-select
                      style="width:120px;margin-right:10px;"
                      show-search
                      :allowClear="true"
                      placeholder="请选择站点"
                      v-model="searchSite.locationId"
                      @change="changeSiteDimension"
                      :filter-option="filterOption"
                    >
                      <a-icon slot="suffixIcon" type="caret-down" :style="{ fontSize: '14px', color: '#000' }" />
                      <a-select-option v-for="(item, index) in locationListData" :key="index + '-' + item.id" :value="item.id">{{ item.city }}</a-select-option>
                    </a-select>
                  </div>

                  <div>
                    <span>排序规则：</span>
                    <a-select style="width:150px;" placeholder="请选择规则" allowClear v-model="searchSite.orderByField" @change="changeSiteRules">
                      <a-icon slot="suffixIcon" type="caret-down" :style="{ fontSize: '14px', color: '#000' }" />
                      <a-select-option v-for="item in collation" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
                    </a-select>
                  </div>
                  <div>
                    <span>日期筛选：</span>
                    <a-range-picker :disabledDate="disabledEndDate" style="width:220px;" @change="changeSiteDimension" v-model="searchSite.selectDate">
                      <a-icon slot="suffixIcon" :style="{ fontSize: '14px', color: '#000' }" />
                    </a-range-picker>
                  </div>
                </div>
                <div class="r" style="min-width:180px;text-align:right;margin-bottom: 12px">
                  <a-button type="primary" @click="changeSiteDimension" style="background:#1d6fe9;">搜索</a-button>
                  <!-- <a-button type="primary" @click="exportData" style="background:#34C025;border-color:#34C025;">导出excel</a-button> -->
                </div>
              </div>
              <!-- 表格 -->
              <div class="main-body" ref="table">
                <a-table class="table" :columns="platformDimensionList" :pagination="false" :data-source="siteList" :scroll="{ x: 900, y: tableHeight - inputHeight }" rowKey="id">
                  <!-- 流水 -->
                  <template slot="totalMoney" slot-scope="text, record" class="sitetotalOrderNum">
                    <p>总流水：￥{{ (record.totalMoney || 0) | fenToYuan }}</p>
                    <p>已核销：￥{{ (record.completeMoney || 0) | fenToYuan }}</p>
                    <p>已退款：￥{{ (record.refundMoney || 0) | fenToYuan }}</p>
                  </template>
                  <!-- 订单 -->
                  <template slot="totalOrderNum" slot-scope="text, record">
                    <p>总订单：{{ record.totalOrderNum || 0 }}</p>
                    <p>已核销：{{ record.completeOrderNum || 0 }}</p>
                    <p>已退款：{{ record.refundOrderNum || 0 }}</p>
                  </template>
                  <!-- 商品 -->
                  <template slot="productSellNum" slot-scope="text, record">
                    <!-- <p>总数量：{{ record.productNum || 0 }}</p> -->
                    <p>售卖中：{{ record.productSellNum || 0 }}</p>
                    <!-- <p>下架：{{ record.productSellOutNum || 0 }}</p> -->
                  </template>
                  <!-- 利润 -->
                  <template slot="profitMoney" slot-scope="text, record">
                    <p>￥{{ (record.profitMoney || 0) | fenToYuan }}</p>
                  </template>
                </a-table>
                <!-- 分页 -->
                <div class="paging-container paging-box">
                  <a-pagination
                    :pageSize="sitePagination.pageSize"
                    v-model="sitePagination.pageIndex"
                    :total="sitePagination.total"
                    showQuickJumper
                    showLessItems
                    :showTotal="(total) => `共 ${total} 条`"
                    style="margin: 10px auto;"
                    @change="handleSitePageChange"
                  />
                </div>
              </div>
            </div>

            <!-- 表图  -->
            <div class="right-box host-box-item">
              <!-- 总流水  -->
              <div class="bottom-wapper bottom-wapper-box ">
                <div class="top-box total-number">
                  <div class="top-box-item">
                    <p class="number-p">¥{{ siteTotalStatistics.totalMoney | fenToYuan }}</p>
                    <p class="text-p">总流水</p>
                  </div>
                  <div class="top-box-item">
                    <p class="number-p">{{ siteTotalStatistics.totalOrderNum || 0 }}</p>
                    <p class="text-p">总订单</p>
                  </div>
                  <div class="top-box-item">
                    <p class="number-p">{{ siteTotalStatistics.productNum }}</p>
                    <p class="text-p">商品总数量</p>
                  </div>
                  <div class="top-box-item">
                    <p class="number-p">￥{{ siteTotalStatistics.profitMoney | fenToYuan }}</p>
                    <p class="text-p">
                      <a-tooltip placement="bottomRight">
                        <template slot="title">
                          <p>商品利润=商品售价*售卖数量-商品结算价*售卖数量-主播收益</p>
                          <p>总利润=所有商品利润之和</p>
                        </template>
                        总利润<a-icon type="question-circle" style="color:#0090FF;margin-left:5px;" />
                      </a-tooltip>
                    </p>
                  </div>
                </div>

                <div class="pie-data-box">
                  <!-- 复选框 -->
                  <div class="checkbox">
                    <a-radio-group :options="plainOptions" :default-value="value1" @change="SelectProduct" />
                  </div>
                  <!-- 饼图 -->
                  <div class="echarts">
                    <div id="pieDataEchart"></div>
                  </div>
                </div>
                <!-- 折线图 -->
                <div class="data-statistics-box">
                  <div class="time-box">
                    <div class="text">数据统计</div>
                    <div>
                      <a-tabs default-active-key="1" @change="clickTiem" class="to-choose-time">
                        <a-tab-pane key="1" tab="按日"> </a-tab-pane>
                        <a-tab-pane key="2" tab="按周"> </a-tab-pane>
                        <a-tab-pane key="3" tab="按月"> </a-tab-pane>
                      </a-tabs>
                    </div>
                  </div>
                  <div class="echarts">
                    <div id="dataStatistics"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-spin>
      </a-tab-pane>

      <!-- 商品维度 -->
      <a-tab-pane key="2" tab="商品维度" force-render>
        <!-- 商品数据 -->
        <a-spin class="statist-box " tip="加载中..." :spinning="isGoodsLoading">
          <div>
            <!-- 筛选 -->
            <div class="filter ">
              <div class="l search-box">
                <div>
                  <span>站点：</span>
                  <a-select
                    style="width:160px;margin-right:16px;"
                    show-search
                    :allowClear="true"
                    placeholder="请选择站点"
                    @search="getLocationList($event)"
                    v-model="searchGoods.locationId"
                    @change="handleByQueryCondGood"
                    :filter-option="filterOption"
                  >
                    <a-select-option v-for="(item, index) in locationListData" :key="index + '-' + item.id" :value="item.id">{{ item.city }}</a-select-option>
                  </a-select>
                </div>
                <div>
                  <span>商品名称：</span>
                  <a-input-search style="width:240px;margin-right:16px;" type="text" placeholder="商品名称" allowClear v-model="searchGoods.productName" @search="handleByQueryCondGood" />
                </div>
                <div>
                  <span>日期：</span>
                  <a-range-picker :disabledDate="disabledEndDate" @change="handleByQueryCondGood" v-model="searchGoods.selectDate" />
                </div>
              </div>
              <div class="r" style="min-width:180px;text-align:right;margin-bottom: 11px">
                <a-button type="primary" @click="handleByQueryCondGood" style="background:#1d6fe9;">查询</a-button>
                <!-- <a-button type="primary" @click="exportGoodsFn" style="background:#34C025;border-color:#34C025;">导出excel</a-button> -->
              </div>
            </div>
            <div class="statist-wapper statist-box marningTop ">
              <div class="left-box goods-box-item">
                <div class="card-title">商品（spu）</div>
                <div class="remind-text">*列表只显示在渠道上有销量的商品，并不是上线渠道的所有商品</div>
                <!-- 表格 -->
                <div class="statist-table">
                  <a-table :columns="goodsTableColumns" :pagination="false" :data-source="goodsList" :customRow="rowClick" :scroll="{ x: 900, y: tableHeight - 140 }" rowKey="id">
                    <template slot="productName" slot-scope="text, record">
                      <p>{{ record.productName || '无' }}</p>
                      <p>ID：{{ record.productId || '无' }}</p>
                    </template>
                    <!-- 主播达人 -->
                    <template slot="agentName" slot-scope="text, record">
                      <p style="margin-bottom:0;">{{ record.agentName || '无' }}：{{ record.agentPhone || '无' }}</p>
                    </template>
                    <!-- 用户信息 -->
                    <template slot="userName" slot-scope="text, record">
                      <p style="margin-bottom:0;">{{ record.userName || '无' }}：{{ record.userPhone || '无' }}</p>
                    </template>
                    <span slot="customTitle">
                      <a-tooltip placement="topRight" overlayClassName="new-tooltip">
                        <template slot="title">商品总利润=商品售价*售卖数量-商品结算价*售卖数量-当前产品订单所产生的主播收益</template>
                        联联利润<a-icon type="question-circle" style="color:#0090FF;margin-left:5px;" />
                      </a-tooltip>
                    </span>
                    <template slot="action" slot-scope="text, record">
                      <a-button type="primary" size="small" @click="clickTableItem(record)">查看</a-button>
                    </template>
                  </a-table>
                </div>
                <!-- 分页 -->
                <div class="paging-container" style="padding-right:16px;">
                  <a-pagination
                    :pageSize="goodsPagination.pageSize"
                    v-model="goodsPagination.pageIndex"
                    :total="goodsPagination.total"
                    showQuickJumper
                    showLessItems
                    :showTotal="(total) => `共 ${total} 条`"
                    style="margin: 10px auto;"
                    @change="handleGoodsPageChange"
                  />
                </div>
              </div>
              <div class="right-box goods-box-item">
                <div class="card-title">套餐/规格（sku）</div>
                <a-spin tip="加载中..." :spinning="isSkuListLoading">
                  <template v-if="skuList && skuList.length > 0">
                    <div class="sku-box">
                      <div class="sku-box-item" v-for="(item, index) in skuList" :key="index">
                        <p style="font-weight:bold;">套餐名称：{{ item.subTitle || '' }}</p>
                        <a-row>
                          <a-col :span="8">
                            <p>售价：¥{{ (item.salePrice || 0) | fenToYuan }}</p>
                            <p>总销量：{{ item.totalOrderNum || 0 }}</p>
                            <p>总流水：¥{{ (item.totalMoney || 0) | fenToYuan }}</p>
                            <p class="blue-text">今日销量：{{ item.todayTotalOrderNum || 0 }}</p>
                          </a-col>
                          <a-col :span="8">
                            <p>商家结算价：¥{{ (item.settlePrice || 0) | fenToYuan }}</p>
                            <p>总核销量：{{ item.completeOrderNum || 0 }}</p>
                            <p>总核销额：¥{{ (item.completeMoney || 0) | fenToYuan }}</p>
                            <p class="blue-text">今日核销量：{{ item.todayCompleteOrderNum || 0 }}</p>
                          </a-col>
                          <a-col :span="8">
                            <p>佣金：{{ item.superFirstMoney || 0 | fenToYuan }}/{{ item.firstMoney || 0 | fenToYuan }}/{{ item.secondMoney || 0 | fenToYuan }}</p>
                            <p>总退款量：{{ item.refundOrderNum || 0 }}</p>
                            <p>总退款额：¥{{ (item.refundMoney || 0) | fenToYuan }}</p>
                            <p class="blue-text">今日退款量：{{ item.todayRefundOrderNum || 0 }}</p>
                          </a-col>
                        </a-row>
                      </div>
                    </div>
                  </template>
                  <div v-else class="empty-box">
                    <div class="empty-img"><img src="@/assets/images/statist/img_qsy_zwush@3x.png" alt="无数据" /></div>
                    <p class="empty-p1">暂无套餐规格</p>
                    <p class="empty-p2">请点击左侧选择商品-展示套餐规格哦</p>
                  </div>
                </a-spin>
              </div>
            </div>
          </div>
        </a-spin>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { statisticsGoodsItemsBd, statisticsGoodsPointAndAreaBd, siteStatisticsDetailSelf, siteStatisticsTotalSelf } from '@/service/baidu'
import { pointLocationList } from '@/service'
import moment from 'moment'
import { optionConfig, coopStatus, colummsConfig, collation } from './statisConfig'
import './index.scss'
import debounce from 'lodash/debounce'
export default {
  name: 'orders',
  data() {
    // 节流
    this.getLocationList = debounce(this.getLocationList, 800)
    return {
      // 屏幕尺寸
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      // 复选框
      plainOptions: ['全部', '周边游产品', '酒景事业部产品'],
      value1: '全部',

      moment,
      latestModifyTime: '',
      // loading是否显示
      isLoading: false,
      isGoodsLoading: false,
      isSkuListLoading: false,

      inputHeight: undefined,
      videInputHeight: undefined,
      // 站点维度table数据查询条件 tab1
      searchSite: {
        selectDate: [],
        locationId: undefined,
        isOrderByAsc: 0,
        orderByField: undefined
      },
      // 商品维度table数据查询条件 tab2
      searchGoods: {
        selectDate: [moment(this.getCurrentData(), 'YYYYMMDD'), moment(this.getCurrentData(), 'YYYYMMDD')],
        keyWord: '',
        locationId: undefined,
        isOrderByAsc: 0,
        orderByField: 'todaySailNum'
      },
      // 主播维度table数据查询条件 tab3
      search: {
        status: '',
        selectDate: [],
        keyWord: ''
      },
      // 视频维度table数据查询条件 tab4
      searchVideo: {
        selectDate: [],
        keyWord: null,
        locationId: undefined,
        isOrderByAsc: 0,
        orderByField: undefined
      },
      // 站点图形的参数
      searchPieSite: {
        dateType: 1,
        locationId: null,
        productType: null
      },
      // 视频图形的参数
      searchPieVideo: {
        dateType: 1,
        locationId: null,
        productType: null
      },

      // 分页
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // 分页
      goodsPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // 站点列表分页
      sitePagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // 视频列表分页
      videoPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // 饼图时间区域
      pieSelectDate: [],

      // 饼图上方总书记
      totalDataPie: {
        profitMoney: 0,
        totalOrderNum: 0,
        productNum: 0,
        totalMoney: 0
      },
      orderMoneyPie: [],
      orderNumPie: [],
      goodsNumPie: [],
      // 订单列表
      anchorList: [],
      // 主播列表总数据条数
      anchorTotal: 0,
      skuList: [],
      // 今天统计数
      totalData: {},
      // 总统计数
      todayData: {},
      // tab2商品列表
      goodsList: [],
      locationListData: [],

      // 站点维度列表
      siteList: [],
      // 站点维度总统计，饼图
      siteTotalStatistics: {},

      // 站点饼图数据传echarts
      siteNumPie: [],
      // 站点折线图数据传echarts
      siteDataTiem: [],
      // 周边游
      siteNumLine: [],
      // 酒景
      siteNumLineWineScene: [],

      // 视频维度列表
      videoList: [],
      // 视频维度总统计，饼图
      videoTotalStatistics: {},

      // 视频饼图数据传echarts
      videoNumPie: [],
      // 视频折线图数据传echarts
      // 时间
      videoDataTiem: [],
      // 周边游
      videoNumLine: [],
      // 酒景
      videoNumLineWineScene: [],

      coopStatus: coopStatus || [],
      tableColumns: colummsConfig.tableColumns || [],
      goodsTableColumns: colummsConfig.goodsTableColumns || [],
      // 排序规则
      collation: collation || [],
      // 站点维度列表
      platformDimensionList: colummsConfig.platformDimensionList || [],
      // 视频维度列表
      videoDimensionList: colummsConfig.videoDimensionList || [],

      rowClick: (record) => ({
        // 事件
        on: {
          click: (e) => {
            // 点击改行时要做的事情
          }
        }
      })
    }
  },
  methods: {
    // 时间选择器只能到最大日期
    disabledEndDate(endValue) {
      const startValue = new Date()
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() <= endValue.valueOf()
    },
    // 站点单选框
    SelectProduct(e) {
      if (e.target.value === '全部') {
        this.searchPieSite.productType = null
        console.log('全部')
        this.postSiteStatisticsTotal()
      } else if (e.target.value === '周边游产品') {
        console.log('周边游产品')
        this.searchPieSite.productType = 0
        this.postSiteStatisticsTotal()
      } else if (e.target.value === '酒景事业部产品') {
        console.log('酒景事业部产品')
        this.searchPieSite.productType = 6
        this.postSiteStatisticsTotal()
      }
    },
    // 站点选择时间渲染图
    clickTiem(key) {
      if (key === '1') {
        this.searchPieSite.dateType = 1
        this.postSiteStatisticsTotal()
      } else if (key === '2') {
        this.searchPieSite.dateType = 2
        this.postSiteStatisticsTotal()
      } else if (key === '3') {
        this.searchPieSite.dateType = 3
        this.postSiteStatisticsTotal()
      }
    },

    // 商品维度查看
    clickTableItem(record) {
      const { productId = '' } = record || {}
      const { selectDate = [] } = this.searchGoods
      const postItemParam = {
        productId,
        dayStart: selectDate[0] ? moment(selectDate[0]).format('YYYYMMDD') : undefined,
        dayEnd: selectDate[1] ? moment(selectDate[1]).format('YYYYMMDD') : undefined
      }
      this.isSkuListLoading = true
      statisticsGoodsItemsBd(postItemParam)
        .then((res = []) => {
          if (res && res.length > 0) {
            this.skuList = res
          } else {
            this.skuList = []
          }
        })
        .finally(() => {
          this.isSkuListLoading = false
        })
        .catch(() => {
          this.isSkuListLoading = false
        })
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 站点列表
    async getLocationList(e) {
      await pointLocationList({ city: e }).then((res = []) => {
        this.locationListData = res
      })
    },
    getCurrentData() {
      return new Date().toLocaleDateString()
    },
    // tab切换
    callback(key) {
      let day1 = new Date()
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
      if (key === '1') {
        this.searchSite = {
          selectDate: [moment(this.getCurrentData(), 'YYYYMMDD'), moment(this.getCurrentData(), 'YYYYMMDD')],
          locationId: undefined,
          isOrderByAsc: 0,
          orderByField: undefined
        }
        this.loadTabOne()
      } else if (key === '2') {
        this.searchGoods = {
          selectDate: [moment(this.getCurrentData(), 'YYYYMMDD'), moment(this.getCurrentData(), 'YYYYMMDD')],
          keyWord: '',
          locationId: undefined,
          isOrderByAsc: 0,
          orderByField: 'todaySailNum'
        }
        this.goodsQuery()
      }
    },

    // 站点维度列表
    async postSiteStatisticsDetail() {
      const { pageIndex, pageSize } = this.sitePagination // 页码
      const { selectDate, locationId, isOrderByAsc, orderByField } = this.searchSite // 搜索
      let isorderByFieldString = ''
      if (orderByField === 0) {
        isorderByFieldString = 'completeSailMoney'
      } else if (orderByField === 1) {
        isorderByFieldString = 'refundSailMoney'
      } else if (orderByField === 2) {
        isorderByFieldString = 'completeOrderSailNum'
      } else if (orderByField === 3) {
        isorderByFieldString = 'refundOrderNum'
      }
      const res = await siteStatisticsDetailSelf({
        dayStart: selectDate[0] ? moment(selectDate[0]).format('YYYYMMDD') : null,
        dayEnd: selectDate[1] ? moment(selectDate[1]).format('YYYYMMDD') : null,
        isOrderByAsc,
        locationId,
        orderByField: isorderByFieldString || null,
        pageIndex,
        pageSize
      })
      const { detailStatisticsList = {}, total = 0 } = res || {}
      this.siteList = Object.freeze(detailStatisticsList) || []
      this.sitePagination.total = total || 0
    },

    // 站点图形数据
    async postSiteStatisticsTotal() {
      console.log(1)
      const { dateType, productType } = this.searchPieSite
      const { selectDate, locationId } = this.searchSite
      const res = await siteStatisticsTotalSelf({
        dateType,
        locationId,
        productType,
        dayEnd: selectDate[1] ? moment(selectDate[1]).format('YYYYMMDD') : null,
        dayStart: selectDate[0] ? moment(selectDate[0]).format('YYYYMMDD') : null
      })
      const { totalStatistics = {}, productTypeList = [], latestModifyTime = '' } = res || {}
      this.siteTotalStatistics = Object.freeze(totalStatistics) || {}
      this.latestModifyTime = latestModifyTime
      this.siteDataTiem = []
      this.siteNumLine = []
      this.siteNumLineWineScene = []
      if (productTypeList !== null) {
        for (let i = 0; i < productTypeList.length; i++) {
          const siteNumPieArr = []
          const siteNumLineWineScenearr = []
          this.siteDataTiem.push(productTypeList[i].dateTime)
          siteNumPieArr.push(productTypeList[i].dateTime, productTypeList[i].type1TotalMoney ? (productTypeList[i].type1TotalMoney / 100).toFixed(2) : 0, productTypeList[i].type1TotalOrderNum)
          this.siteNumLine.push(siteNumPieArr)
          siteNumLineWineScenearr.push(
            productTypeList[i].dateTime,
            productTypeList[i].type2TotalMoney ? (productTypeList[i].type2TotalMoney / 100).toFixed(2) : 0,
            productTypeList[i].type2TotalOrderNum
          )
          this.siteNumLineWineScene.push(siteNumLineWineScenearr)
        }
      } else {
        this.siteDataTiem = [0, 0, 0]
        this.siteNumLine = [0, 0, 0]
        this.siteNumLineWineScene = [0, 0, 0]
      }
      const { completeOrderPercentage, completeMoney, completeOrderNum, refundOrderPercentage, refundMoney, refundOrderNum, unUsedOrderPercentage, unUsedMoney, unUsedOrderNum } = totalStatistics || {}
      this.siteNumPie = [
        {
          value: completeOrderNum,
          name: `已核销`,
          label: {
            formatter: [`{value|已核销: }{rate|${completeOrderPercentage}}`, `{value|金额: }{rate|${completeMoney / 100}}`, `{value|订单: }{rate|${completeOrderNum}}`].join('\n')
          }
        },
        {
          value: refundOrderNum,
          name: `已退款`,
          label: {
            formatter: [`{value|已退款: }{rate|${refundOrderPercentage}}`, `{value|金额: }{rate|${refundMoney / 100}}`, `{value|订单: }{rate|${refundOrderNum}}`].join('\n')
          }
        },
        {
          value: unUsedOrderNum,
          name: `未使用`,
          label: {
            formatter: [`{value|未使用: }{rate|${unUsedOrderPercentage}}`, `{value|金额: }{rate|${unUsedMoney / 100}}`, `{value|订单: }{rate|${unUsedOrderNum}}`].join('\n')
          }
        }
      ]
      this.siteEchart()
    },

    // 站点维度 Echart
    siteEchart() {
      var pieDataEchart = this.$echarts.init(document.getElementById('pieDataEchart'))
      var dataStatistics = this.$echarts.init(document.getElementById('dataStatistics'))

      this.$nextTick(() => {
        window.addEventListener('resize', () => {
          this.screenWidth = window.innerWidth
          this.screenHeight = window.innerHeight
          pieDataEchart.resize()
          dataStatistics.resize()
        })
        optionConfig.pieData.series[0].data = this.siteNumPie || []
        pieDataEchart.setOption(optionConfig.pieData)
        optionConfig.dataStatistics.xAxis.data = this.siteDataTiem || []
        optionConfig.dataStatistics.series[0].data = this.siteNumLine || []
        optionConfig.dataStatistics.series[1].data = this.siteNumLineWineScene || []
        dataStatistics.setOption(optionConfig.dataStatistics)
      })
    },

    /**
     * 通过条件查询
     * @returns {void}
     */
    // 站点 条件搜索
    changeSiteDimension() {
      this.sitePagination.pageIndex = 1
      this.postSiteStatisticsDetail()
      this.postSiteStatisticsTotal()
    },
    // 站点 规则搜索
    changeSiteRules() {
      this.sitePagination.pageIndex = 1
      this.postSiteStatisticsDetail()
    },
    // 商品 条件搜索
    handleByQueryCondGood() {
      this.goodsPagination.pageIndex = 1
      this.goodsQuery()
    },
    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    // 商品 分页
    handleGoodsPageChange(num) {
      this.goodsPagination.pageIndex = num
      this.goodsQuery()
    },
    // 站点 分页
    handleSitePageChange(num) {
      this.sitePagination.pageIndex = num
      this.postSiteStatisticsDetail()
    },

    // 商品列表接口请求参数
    getParamsGoods() {
      const { pageIndex, pageSize } = this.goodsPagination
      const { selectDate, locationId, productName, isOrderByAsc, orderByField } = this.searchGoods
      return {
        pageIndex,
        pageSize,
        locationId,
        orderByField,
        isOrderByAsc,
        productName,
        dayStart: selectDate[0] ? moment(selectDate[0]).format('YYYYMMDD') : undefined,
        dayEnd: selectDate[1] ? moment(selectDate[1]).format('YYYYMMDD') : undefined
      }
    },

    // 商品维度列表接口
    goodsQuery() {
      this.isGoodsLoading = true
      statisticsGoodsPointAndAreaBd(this.getParamsGoods())
        .then((res = {}) => {
          this.isGoodsLoading = false
          console.log(res)
          const { pageStatistics = {}, todayStatistics = {}, totalStatistics = {}, latestModifyTime = '' } = res
          this.totalData = totalStatistics
          this.todayData = todayStatistics
          this.goodsList = pageStatistics.detailList || []
          this.goodsPagination.total = pageStatistics.total
          this.latestModifyTime = latestModifyTime
        })
        .finally(() => {
          this.isGoodsLoading = false
        })
        .catch(() => {
          this.isGoodsLoading = false
        })
    },

    // 设置搜索
    setSearch() {
      const { pageIndex, keyWord, dayStart, dayEnd, status } = this.$route.query
      const queryLen = Object.keys(this.$route.query).length
      if (queryLen) {
        this.search = {
          ...this.search,
          pageIndex: pageIndex ? Number(pageIndex) : 1,
          keyWord: keyWord || '',
          status: status || '',
          selectDate: dayStart && dayEnd ? [moment(Number(dayStart)), moment(Number(dayEnd))] : []
        }
      }
    },

    // 默认展示tabs1
    loadTabOne() {
      this.setSearch()
      this.isLoading = true
      Promise.all([this.postSiteStatisticsDetail(), this.postSiteStatisticsTotal()]).then(() => {
        this.isLoading = false
      })
    }
  },
  watch: {},

  mounted() {
    this.getLocationList()
    this.goodsQuery()
    this.$nextTick(() => {
      this.inputHeight = this.$refs.filterBox ? this.$refs.filterBox.offsetHeight : 0
      this.videInputHeight = this.$refs.filterBox ? this.$refs.filterBox.offsetHeight : 0
    })
  },
  // 过滤器
  filters: {
    // 处理分-元
    fenToYuan(val) {
      if (!val) return 0
      return (val / 100).toFixed(2)
    }
  }
}
</script>
<style scoped lang="less">
.main-body {
  margin: 10px 0 0;
}
.totalOrderNum {
  color: red;
}
.filter {
  border: 1px solid #ebebeb;
  padding: 14px 16px 0;
}
.content-wapper {
  min-width: 1366px;
  min-height: 768px;
  padding: 16px 0 0 14px;
  position: relative;
  top: 0;
  background: #fff;
  min-height: 100%;
}
p {
  margin: 0;
}

/deep/ .ant-tabs {
  width: 100%;
  // height: 80%;
  // background: #fff;
}

.statist-box {
  overflow-y: scroll;
  /deep/ .ant-spin-container {
    height: 100%;
    padding-right: 16px;
  }
  /deep/ .host-box-item .ant-spin-container {
    padding-right: 0;
  }
  .right-box {
    /deep/ .ant-spin-nested-loading {
      // height: calc(100% - 60px);
      height: 98%;
    }
  }
}
/deep/ .ant-tabs-nav {
  // padding: 5px 2px 4px;
  padding: 1px 2px;
  height: 32px;
  width: 200px;
  background: #eeeeee;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
/deep/ .ant-tabs-nav-wrap {
  margin-bottom: 2px;
}
/deep/ .ant-tabs-nav .ant-tabs-tab {
  height: 12px;
  width: 96px;
  text-align: center;
  line-height: 13px;
  background: #eeeeee;
  border-right: 1px solid #cccccc;
  // color: #333;
  padding: 0;
  margin: 0;
  transition: none;
}
/deep/ .ant-tabs-nav .ant-tabs-tab:nth-last-child(1) {
  border-right: 0;
}
.update-time {
  position: relative;
  left: 5px;
  top: 0;
  padding: 0;
  height: 40px;
}
.time-box {
  display: flex;
  justify-content: space-between;
  padding: 16px 14px 0;
  .text {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 32px;
  }
}
.to-choose-time {
  height: 32px;
  color: #333333;
  font-size: 14px;
  /deep/ .ant-tabs-nav {
    width: 293px;
    height: 32px;
  }
}
.time-box-active {
  background: #0b61ff;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  // border-radius: 4px;
}
/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  position: relative;
  top: 0;
  height: 28px;
  padding-top: 3px;
  line-height: 23px;
  background: #0b61ff;
  border-radius: 6px;
  color: #fff;
  z-index: 10;
}
/deep/ .ant-tabs-nav-container {
  margin-bottom: 12px;
}
/deep/ .ant-tabs-ink-bar {
  display: none !important;
}
/deep/ .ant-tabs-bar {
  border: none;
}
.empty-box {
  margin: 25% 0 35%;
}
/deep/ .checked-td-of-add-table {
  background: #e8f0fc;
  // box-shadow: 0px 2px 14px 0px rgba(42, 68, 103, 0.18);
  border-top: 2px solid #0b61ff;
  border-bottom: 2px solid #0b61ff !important;
}
/deep/ .checked-td-of-add-table:first-child {
  border-left: 2px solid #0b61ff !important;
}
/deep/ .checked-td-of-add-table:last-child {
  border-right: 2px solid #0b61ff !important;
}
/deep/ body {
  background: #fff !important;
  z-index: 9999;
}
</style>
